.jjj {
  width: 28px;
  height: 28px;
}

.jw-spinning-wrapper {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;

  .jw-spinning {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .jw-spinning-dot {
      position: relative;
      display: inline-block;
      transform: rotate(45deg);
      animation: jwRotate 1.2s infinite linear;

      &-item {
        position: absolute;
        display: block;
        width: 14px;
        height: 14px;
        background-color: #209f85;
        border-radius: 100%;
        transform: scale(0.75);
        transform-origin: 50% 50%;
        opacity: 0.3;
        animation: jwSpinMove 1s infinite linear alternate;

        &:nth-child(1) {
          top: 0;
          left: 0;
        }
        &:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: 0.4s;
        }
        &:nth-child(3) {
          right: 0;
          bottom: 0;
          animation-delay: 0.8s;
        }
        &:nth-child(4) {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
        }
      }
    }
  }

  @keyframes jwSpinMove {
    to {
      opacity: 1;
    }
  }

  @keyframes jwRotate {
    to {
      transform: rotate(405deg);
    }
  }
}

.jw-spinning-mask {
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.3s;
    content: "";
    opacity: 0.7;
    pointer-events: auto;
  }
}
